<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="资质名称">
        <el-input v-model="formInline.quaName"></el-input>
      </el-form-item>
      <el-form-item label="级别">
        <el-select v-model="formInline.queLevel">
          <el-option label="---选择级别---" value=""></el-option>
          <el-option label="甲级" value="甲级"></el-option>
          <el-option label="乙级" value="乙级"></el-option>
          <el-option label="丙级" value="丙级"></el-option>
          <el-option label="丁级" value="丁级"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年审时间">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="formInline.quaAnnualAuditDate"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="show">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" @click="handleAdd">添加</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" @click="handleDel">删除</el-button>
      </el-form-item>
    </el-form>
    <el-table ref="multipleTable" :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="资质名称" width="180">
        <template slot-scope="scope">
          <span
            style="margin-left: 10px"
            @click="handlekan(scope.row.qua_id)"
            >{{ scope.row.qua_name }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="资质开始时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            dateFormat(scope.row.qua_start_date)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="资质结束时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            dateFormat(scope.row.qua_end_date)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="年审时间" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{
            dateFormat(scope.row.qua_annual_audit_date)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="内容" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.qua_content }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handlekan(scope.row.qua_id)"
            >查看</el-button
          >
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row.qua_id)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="资质录入" :visible.sync="dialogAddVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="资质名称" prop="qua_name">
          <el-input v-model="form.qua_name"></el-input>
        </el-form-item>
        <el-form-item label="资质开始时间" prop="qua_start_date">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.qua_start_date"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="资质结束时间" prop="qua_end_date">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.qua_end_date"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="年审时间" prop="qua_annual_audit_date">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.qua_annual_audit_date"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="资质级别" prop="que_level">
          <el-select v-model="form.que_level">
            <el-option label="---选择级别---" value=""></el-option>
            <el-option label="甲级" value="甲级"></el-option>
            <el-option label="乙级" value="乙级"></el-option>
            <el-option label="丙级" value="丙级"></el-option>
            <el-option label="丁级" value="丁级"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资质内容" prop="qua_content">
          <el-input v-model="form.qua_content"></el-input>
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            multiple
            :on-success="handleAvatarSuccess"
            name="fileList"
            :show-file-list="false"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
          <el-table :data="customerInfo.fileList" style="width: 100%">
            <el-table-column prop="fileName" label="文件名" width="180">
            </el-table-column>
            <el-table-column prop="upLoadDate" label="上传时间" width="180">
            </el-table-column>
            <el-table-column prop="fileSize" label="文件大小">
            </el-table-column>
            <el-table-column prop="fileTye" label="文件类型"> </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取消</el-button>
        <el-button type="primary" @click="AddCun('form')">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑资质" :visible.sync="dialogUpdateVisible">
      <el-form :model="bform">
        <el-form-item label="资质名称">
          <el-input v-model="bform.qua_name"></el-input>
        </el-form-item>
        <el-form-item label="资质开始时间">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="bform.qua_start_date"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="资质结束时间">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="bform.qua_end_date"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="年审时间">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="bform.qua_annual_audit_date"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="资质级别">
          <el-select v-model="bform.que_level">
            <el-option label="---选择级别---" value=""></el-option>
            <el-option label="甲级" value="甲级"></el-option>
            <el-option label="乙级" value="乙级"></el-option>
            <el-option label="丙级" value="丙级"></el-option>
            <el-option label="丁级" value="丁级"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资质内容">
          <el-input v-model="bform.qua_content"></el-input>
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            multiple
            :on-success="handleAvatarSuccess"
            name="fileList"
            :show-file-list="false"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
          <el-table :data="customerInfo.fileList" style="width: 100%">
            <el-table-column prop="fileName" label="文件名" width="180">
            </el-table-column>
            <el-table-column prop="upLoadDate" label="上传时间" width="180">
            </el-table-column>
            <el-table-column prop="fileSize" label="文件大小">
            </el-table-column>
            <el-table-column prop="fileTye" label="文件类型"> </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false">取消</el-button>
        <el-button type="primary" @click="UpdateCun">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="资质信息" :visible.sync="dialogKanVisible">
      <el-form :model="aform">
        <el-form-item label="资质名称">
          <el-input v-model="aform.qua_name"></el-input>
        </el-form-item>
        <el-form-item label="资质开始时间">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="aform.qua_start_date"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="资质结束时间">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="aform.qua_end_date"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="年审时间">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="aform.qua_annual_audit_date"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="资质级别">
          <el-select v-model="aform.que_level">
            <el-option label="---选择级别---" value=""></el-option>
            <el-option label="甲级" value="甲级"></el-option>
            <el-option label="乙级" value="乙级"></el-option>
            <el-option label="丙级" value="丙级"></el-option>
            <el-option label="丁级" value="丁级"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="资质内容">
          <el-input v-model="aform.qua_content"></el-input>
        </el-form-item>
        <el-form-item label="附件">
          <el-table :data="customerInfo.fileList" style="width: 100%">
            <el-table-column prop="fileName" label="文件名" width="180">
            </el-table-column>
            <el-table-column prop="upLoadDate" label="上传时间" width="180">
            </el-table-column>
            <el-table-column prop="fileSize" label="文件大小">
            </el-table-column>
            <el-table-column prop="fileTye" label="文件类型"> </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogKanVisible = false">取消</el-button>
        <el-button type="primary" @click="Submite()"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      tableData: [],
      formInline: {
        quaName: "",
        queLevel: "",
        quaAnnualAuditDate: null,
      },
      form: {
        qua_id: "",
        qua_name: "",
        qua_start_date: "",
        qua_end_date: "",
        qua_annual_audit_date: "",
        qua_content: "",
        que_level: "",
      },
      bform: {
        qua_id: "",
        qua_name: "",
        qua_start_date: "",
        qua_end_date: "",
        qua_annual_audit_date: "",
        qua_content: "",
        que_level: "",
      },
      aform: {
        qua_id: "",
        qua_name: "",
        qua_start_date: "",
        qua_end_date: "",
        qua_annual_audit_date: "",
        qua_content: "",
        que_level: "",
      },
      rules: {
        qua_name: [
          { required: true, message: "资质名称不能为空", trigger: "blur" },
        ],
        qua_start_date: [
          { required: true, message: "资质开始时间不能为空", trigger: "blur" },
        ],
        qua_end_date: [
          { required: true, message: "资质结束时间不能为空", trigger: "blur" },
        ],
        qua_annual_audit_date: [
          { required: true, message: "年审时间不能为空", trigger: "blur" },
        ],
      },
      dialogAddVisible: false,
      dialogUpdateVisible: false,
      dialogKanVisible: false,
      uploadUrl:
        "http://localhost:20932/api/FileManager/FileManager/FilesUpload",
      customerInfo: {
        fileList: [],
        c_type: "2",
        industry: null,
        intimacy: "1",
      },
    };
  },
  created() {
    this.show();
  },
  methods: {
    show() {
      this.form = {};
      this.$axios
        .get(
          "http://localhost:20932/api/SystemManager/Qualification/GetQualificationList?quaName=" +
            this.formInline.quaName +
            "&queLevel=" +
            this.formInline.queLevel +
            "&quaAnnualAuditDate=" +
            this.dateFormat(this.formInline.quaAnnualAuditDate)
        )
        .then((r) => {
          if (r.status == 200) {
            this.tableData = r.data.list;
          }
        });
    },
    handleAvatarSuccess(res, files, fileList) {
      if (res.code == 1) {
        res.data.some((f, i) => {
          this.customerInfo.fileList.push({
            fileName: f.fileOldName,
            upLoadDate: f.upLoadDate,
            fileSize: f.fileSize,
            fileTye: f.fileType,
            userName: this.loginUserName,
          });
        });
      }
    },
    handlekan(id) {
      this.dialogKanVisible = true;
      this.$axios
        .get(
          "http://localhost:20932/api/SystemManager/Qualification/GetQualificationFan?id=" +
            id
        )
        .then((r) => {
          if (r.status == 200) {
            this.aform = r.data;
          }
        });
    },
    Submite(){
      this.dialogKanVisible=false
      this.customerInfo.fileList=[]
    },
    handleEdit(id) {
      this.dialogUpdateVisible = true;
      this.$axios
        .get(
          "http://localhost:20932/api/SystemManager/Qualification/GetQualificationFan?id=" +
            id
        )
        .then((r) => {
          if (r.status == 200) {
            this.bform = r.data;
          }
        });
    },
    UpdateCun() {
      this.$axios
        .post(
          "http://localhost:20932/api/SystemManager/Qualification/GetQualificationUpdate",
          this.bform
        )
        .then((r) => {
          if ((r.status == 200) & r.data) {
            this.$message("修改成功");
            this.dialogUpdateVisible = false;
            this.show();
          }
        });
    },
    handleAdd() {
      this.dialogAddVisible = true;
    },
    AddCun(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.$axios
            .post(
              "http://localhost:20932/api/SystemManager/Qualification/GetQualificationAdd",
              this.form
            )
            .then((r) => {
              if ((r.status == 200) & r.data) {
                this.$message("添加成功");
                this.dialogAddVisible = false;
                this.show();
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleDel() {
      var list = this.$refs["multipleTable"].selection;
      var ids = [];
      if (list.length === 0) {
        this.$message("至少选中一个");
        return false;
      }
      list.forEach((r) => {
        ids.push(r.qua_id);
      });
      if (!confirm("确定删除吗？")) {
        return false;
      }
      this.$axios
        .post(
          "http://localhost:20932/api/SystemManager/Qualification/GetQualificationDel?ids=" +
            ids
        )
        .then((r) => {
          if ((r.status == 200) & r.data) {
            this.$message("删除成功");
            this.show();
          }
        });
    },
    dateFormat(dateValue) {
      if (dateValue == null) {
        return "";
      }
      return moment(dateValue).format("YYYY-MM-DD HH:mm:ss");
    },
  },
};
</script>